<template>
  <el-dialog :title="title" v-model="visible" class="dialog-md" append-to-body @close="visible = false">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" v-loading="loading">
      <el-form-item label="上级名称">
        <el-input v-model="parentName" disabled />
      </el-form-item>

      <el-form-item label="地区名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入地区名称" maxlength="64" />
      </el-form-item>
      <el-form-item label="地区简称" prop="short_name">
        <el-input v-model="form.short_name" placeholder="请输入地区简称" maxlength="32" />
      </el-form-item>
      <el-form-item label="地区区号" prop="area_code">
        <el-input v-model="form.area_code" placeholder="请输入地区区号" maxlength="16" />
      </el-form-item>
      <el-form-item label="经纬度">
        <el-col :span="8">
          <el-input type="number" v-model="form.lng" placeholder="请输入longitude" min="0" max="180" />
        </el-col>
        <el-col :span="1" class="text-center"> - </el-col>
        <el-col :span="8">
          <el-input type="number" v-model="form.lat" placeholder="请输入latitude" min="0" max="90" />
        </el-col>
        <el-col :span="1"> </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="mapSelectShow = true">点击选取</el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio v-for="dict in sys_show_hide" :value="dict.value">{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="dialog-footer slot">
      <el-button type="primary" :loading="submitting" :disabled="loading" @click="handleSubmit">确 定</el-button>
      <el-button size="large" @click="visible = false">取 消</el-button>
    </div>

    <coord-select
      v-model="mapSelectShow"
      :latitude="form.lat"
      :longitude="form.lng"
      @submit="mapSelectOver"
      v-if="mapSelectShow" />
  </el-dialog>
</template>

<script setup name="PostForm">
  import { infoCityApi, editCityApi, addCityApi } from '@/api/system/city'
  import CoordSelect from '@/components/widgets/CoordSelect/index.vue'

  const props = defineProps({ row: Object, moduleName: String })
  const visible = defineModel()
  const { proxy } = getCurrentInstance()

  const parentName = ref('')
  const form = ref({
    parent_id: 0,
    name: undefined,
    area_code: undefined,
    short_name: undefined,
    lng: undefined,
    lat: undefined,
    status: '1'
  })
  const rules = ref({
    name: [{ required: true, message: '地区名称不能为空', trigger: 'blur' }],
    short_name: [{ required: true, message: '简称名称不能为空', trigger: 'blur' }],
    area_code: [{ required: true, message: '区号不能为空', trigger: 'blur' }],
    status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
  })
  const { sys_show_hide } = proxy.useDict('sys_show_hide')

  // 初始化
  const title = ref('')
  const loading = ref(false)
  onMounted(async () => {
    loading.value = true
    form.value.id = props.row?.id || undefined
    if (form.value.id) {
      title.value = '编辑' + props.moduleName
      await getRowData()
    } else {
      title.value = '添加' + props.moduleName
      form.value.parent_id = props.row?.parent_id || 0
      parentName.value = form.value.parent_id > 0 ? props.row?.parent_name || '' : '中国'
    }
    loading.value = false
  })

  // 获取信息
  async function getRowData() {
    try {
      const { info } = await infoCityApi(form.value.id)
      form.value = proxy.dataToForm(form.value, info)
      parentName.value = info?.parent_name || ''
    } catch (error) {
      visible.value = false
    }
  }

  // 提交表单
  const submitting = ref(false)
  const emit = defineEmits(['submit'])
  const formRef = useTemplateRef('formRef')
  async function handleSubmit() {
    try {
      const valid = await formRef.value.validate()
      if (!valid) return
    } catch (error) {
      return
    }
    if (submitting.value) return
    submitting.value = true
    try {
      await proxy.$modal.confirm('确定提交表单数据？')

      if (form.value.id) {
        await editCityApi(form.value)
      } else {
        await addCityApi(form.value)
      }
      emit('submit')
      proxy.$modal.msgSuccess('操作成功')
      visible.value = false
    } catch (e) {
      submitting.value = false
    }
  }

  // 选择经纬度
  const mapSelectShow = ref(false)
  function mapSelectOver(coord) {
    form.value.lat = coord.latitude
    form.value.lng = coord.longitude
  }
</script>
